import React, { Component } from "react";
import { Card } from "antd";
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";
import echartTheme from "../echartTheme";
import ReactEcharts from "echarts-for-react";
export default class Bar extends Component {
  componentWillMount() {
    echarts.registerTheme("XinHua", echartTheme);
  }
  getOption = () => {
    let option = {
      title: {
        text: "用户订单"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          name: "订单量"
        }
      ]
    };
    return option;
  };
  getOption2 = () => {
    let option = {
      title: {
        text: "阶梯瀑布图",
        subtext: "From XinHua",
        sublink: "http://e.weibo.com/1341556070/Aj1J2x5a5"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params) {
          var tar;
          if (params[1].value != "-") {
            tar = params[1];
          } else {
            tar = params[0];
          }
          return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
        }
      },
      legend: {
        data: ["支出", "收入"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "category",
        splitLine: { show: false },
        data: (function() {
          var list = [];
          for (var i = 1; i <= 11; i++) {
            list.push("11月" + i + "日");
          }
          return list;
        })()
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "辅助",
          type: "bar",
          stack: "总量",
          itemStyle: {
            normal: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)"
            },
            emphasis: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)"
            }
          },
          data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
        },
        {
          name: "收入",
          type: "bar",
          stack: "总量",
          label: {
            normal: {
              show: true,
              position: "top"
            }
          },
          data: [900, 345, 393, "-", "-", 135, 178, 286, "-", "-", "-"]
        },
        {
          name: "支出",
          type: "bar",
          stack: "总量",
          label: {
            normal: {
              show: true,
              position: "bottom"
            }
          },
          data: ["-", "-", "-", 108, 154, "-", "-", "-", 119, 361, 203]
        }
      ]
    };

    return option;
  };
  render() {
    return (
      <div>
        <Card title="柱形图">
          <ReactEcharts option={this.getOption()} theme="XinHua"></ReactEcharts>
        </Card>
        <Card title="柱形图二">
          <ReactEcharts
            option={this.getOption2()}
            theme="XinHua"
          ></ReactEcharts>
        </Card>
      </div>
    );
  }
}
